<template>
    <!-- <div>订单列表</div> -->
    <div>
        <div class="app-container">
            <!-- 标题条件查询 -->
            <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>条件查询</span>
            </div>
            <div>
                <el-row>
                <el-form :inline="true" :model="indent" class="demo-form-inline">
                    <el-col :span="6">
                    <el-form-item  label="订单编号">
                        <el-input  placeholder="订单编号" v-model="indent.orderSn" ></el-input>
                    </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="订单类型">
                        <el-select  placeholder="订单类型" v-model="indent.orderType">
                            <el-option label="正常订单" value="0"></el-option>
                            <el-option label="秒杀订单" value="1"></el-option>
                        </el-select>
                        </el-form-item>
                    </el-col>
                     <el-col :span="6">
                        <el-form-item label="支付方式">
                        <el-select  placeholder="支付方式" v-model="indent.payType">
                            <el-option label="未支付" value="0"></el-option>
                            <el-option label="支付宝" value="1"></el-option>
                            <el-option label="微信" value="2"></el-option>
                        </el-select>
                        </el-form-item>
                    </el-col>
                     <el-col :span="6">
                        <el-form-item label="订单状态">
                        <el-select  placeholder="订单状态" v-model="indent.status">
                            <el-option label="代付款" value="0"></el-option>
                            <el-option label="代发货" value="1"></el-option>
                            <el-option label="已发货" value="2"></el-option>
                            <el-option label="已完成" value="3"></el-option>
                            <el-option label="已关闭" value="4"></el-option>
                            <el-option label="无效订单" value="5"></el-option>
                        </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item class="btn">
                            <el-button size="mini" @click="reset">重置</el-button>
                            <el-button size="mini" type="primary" @click="search">搜索</el-button>          
                        </el-form-item>
                    </el-col>
                </el-form>
                </el-row>
            </div>
            </el-card>
            <!-- 文章列表 -->
            <el-card class="box-card">
            <div>
                <el-table v-loading="loading" :data="indentList" border style="width: 100%">
                    <el-table-column fixed   type="index" width="50" label="#"></el-table-column>
                    <el-table-column prop="orderSn" width="150" label="订单编号" ></el-table-column>
                    <el-table-column  width="150" label="支付方式">
                        <template slot-scope="scope">
                            <el-button size="mini" type="info"  v-if="scope.row.payType==0">未支付</el-button>
                            <el-button size="mini" type="primary" plain v-if="scope.row.payType==1">支付宝</el-button>
                            <el-button size="mini" type="primary" plain v-if="scope.row.payType==2">微信</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column  width="150"  label="订单状态">
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger" v-if="scope.row.status==0">代付款</el-button>
                            <el-button size="mini" type="warning" v-if="scope.row.status==1">代发货</el-button>
                            <el-button size="mini" type="primary" plain v-if="scope.row.status==2">已发货</el-button>
                            <el-button size="mini" type="primary"  v-if="scope.row.status==3">已完成</el-button>
                            <el-button size="mini" type="info" plain v-if="scope.row.status==4">已关闭</el-button>
                            <el-button size="mini" type="primary" plain v-if="scope.row.status==5">无效订单</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column  prop="createTime" width="150"  label="添加时间"></el-table-column>
                    <el-table-column  prop="memberUsername" width="150"  label="用户账号"></el-table-column>
                    <el-table-column  width="150"  label="订单类型">
                        <template slot-scope="scope">
                            <el-button size="mini" type="success" plain>{{scope.row.orderType==0?'正常订单':'秒杀订单'}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column  prop="handleNote" width="150"  label="备注"></el-table-column>
                    <el-table-column  fixed="right"  label="操作"  width="150">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" icon="el-icon-view" type="primary" size="small">查看订单</el-button>
                    </template>
                    </el-table-column>
                </el-table>
                <!-- 这是分页 -->
                <div>
                    <el-pagination 
                    :current-page="page.start"
                    :page-sizes="page.pageSizes"
                    :page-size="page.limit" 
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                    @size-change="handleSizeChange"  
                    @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
            </el-card>
        </div>
    </div>
</template>
<script>
import listOrder from "@/api/order/list" 
export default {
    data(){
        return{
            //订单搜索
            indent:{
                orderSn:'',
                orderType:'',
                payType:'',
                status:'',
            },
            //订单列表
            indentList:[],
            //页码
            page:{
                //开始页
                start: 1,
                //最多几行
                limit: 5,
                //总页数
                total: 0,
                pageSizes:[5, 10, 20, 30],
            },
            loading:false,
        }

    },
    methods:{
        //获取订单列表
        init(){
            listOrder.findOrdersByPage(this.page.start,this.page.limit,this.indent).then(res=>{
                console.log(res);
                if(res.success){
                    this.indentList=res.data.rows;
                    this.page.total=res.data.total;
                }else{
                    this.$message.error("很抱歉获取订单列表失败")
                }
            })
        },
        //查看订单
        handleClick(){

        },
        //重置
        reset(){
        this.indent.orderSn="";
        this.indent.status="";
        this.indent.orderType="";
        this.indent.payType="";
            this.init();
        },
        //搜索
        search(){
            this.page.start=1;
            this.init();
        },
        //每页条数pageSize 改变时会触发
    handleSizeChange(val){
      this.page.limit=val;
      this.init()
    },
    //当前页currentPage 改变时会触发
    handleCurrentChange(val){
      this.page.start=val;
      this.init()
    },
    },
    created(){
        this.init()
    }
}
</script>
<style lang="scss" scoped>
@import "@/styles/myScss";

</style>